<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/3/16 0016
  Time: 下午 17:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../../iconfont/iconfont.css"/>
    <link rel="stylesheet" href="../css/productdetails.css">
    <script src="../js/lunbo.js"></script>
    <script src="../js/detail.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="../../css/thenlogin.css"/>
</head>
<body>
<div class="box">
    <!-- 购物车按钮的遮罩层 -->
    <div class="mask"></div>
    <div class="popup">
        <div class="popup_txt">
            <span>加入购物车成功</span>
            <span class="cancel" onclick="cancel_shield()">×</span>
        </div>
        <div class="popup_btn">
            <span class="continue" onclick="cancel_shield()">继续购物</span>
            <span class="go" onclick="jump()">前往购物车</span>
        </div>
    </div>
    <div id="box">
        <!-- 遮罩层 -->
        <div id="zzc"></div>

        <div class="headNav">
            <div class="headNavRbox">
                <a href="">三星官网</a>
                <a href="">盖乐世社区</a>
                <a href="">三星商城VIP用户专属服务</a>
                <a href="">三星商城APP</a>
                <a href=""><span class="iconfont icon-dianhua" style="margin-right: 5px;"></span>400 011 8899</a>
            </div>
        </div>

        <div class="gnb_nav">
            <div class="gnb_nav_img gnb_nav_float">
                <a href=""><img src="img/global-samsung-logo1.png"/></a>
            </div>

            <div class="gnb_nav_center gnb_nav_float">
                <li>手机/平板</li>
                <li>手表/耳机</li>
                <li>电视/影视</li>
                <li>生活家电</li>
                <li>显示器/存储</li>
            </div>

            <div class="gnb_nav_righ">
                <input id="search" type="text" />
                <div class="searchtip"></div>
                <div onclick="search()" class="dosearch"><img src="img/dosearch.png" alt=""></div>
                <span class="iconfont icon-gouwuche" onclick='${sessionScope.user==null?"isnull()":"iscart()"}'></span>
                <c:if test="${user!=null}">
                    <div class="gwcnumber"><span class="gwcnumbertext">${cartcount}</span></div>
                </c:if>
                <li>${sessionScope.user==null?"<a href='/login' id='delu'>登录/注册</a>":"<img src='img/login.png' width=25 height=25 id='Login' onmouseover='Login()'>"}</li>
                <div id="levitation">
                    <div><a href="/MyOrdershas">我的订单</a></div>
                    <div><a href="/MyCollection">我的收藏</a></div>
                    <div><a href="/Myevaluation">我的评价</a></div>
                    <div><a href="/center">个人主页</a></div>
                    <div><a href="/Shippingaddress">收货地址</a></div>
                    <div><a href="/isnull">退出</a></div>
                </div>
            </div>

            <!-- 显示的盒子 -->
            <div id="show">
                <div id="show_conten_header">
                    <h1>手机/平板</h1><span id="cancelshow">×</span>
                </div>

                <div class="show_nav_conten">
                    <div class="showNavone">
                        <li class="newtuijian">新品推荐<span><img src="img/rightarrow.png" alt=""></span></li>
                        <c:forEach items="${selectxl}" var="xl">
                            <li  class="xlli" id="${xl.xid}">${xl.xname}<span><img src="img/rightarrow.png" alt=""></span></li>
                        </c:forEach>
                    </div>
                    <div class="showNavtwo">
                        <div class="showNavtwoson">
                            <c:forEach items="${newgoods}" var="n">
                                <li onclick="chuandetail(${n.sid},${n.lid})">${n.sname}<span>新</span></li>
                            </c:forEach>
                        </div>
                    </div>
                    <div class="showNavthree">
                        <div id="advertisebox">
                            <img src="img/advertisePhone.png" alt="">
                        </div>
                        <a>Galaxy S23系列</a><br />
                        <a id="lianjie">了解更多</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="infor">
        <p>

        </p>
        <div id="img"><img src="img/pagediscount.png"></div>
        <div class="product">
            <div class="sticky">
                <div class="fixed">
                    <div class="over">
                        <div id="lunbo">

                        </div>
                    </div>
                    <div id="lunboBtn">
                        <a id="left" onclick="rightmove()"><img style="width: 50px;height: 50px;" src="img/leftwards.png" alt=""></a>
                        <a id="right" onclick="leftmove()"><img style="width: 50px;height: 50px;float: right;"  src="img/rightwards.png" alt=""></a>
                    </div>
                </div>

            </div>
            <div id="spec">
                <div id="spec_one">
                    <div id="ding">
                        <span>新品</span>
                        <span style="margin: 0px 10px;">|</span>
                        <span>人气推荐</span>
                        <div style="float: right;">
                            <span><img class="like" onclick="insertLike()" src="img/collect.png"></span>
                            <span><img  src="img/share.png"></span>
                        </div>
                    </div>
                    <h2 style="margin: 20px 0px;"><span class="sname"></span></h2>
                    <div id="price" style="margin-bottom: 40px;">
                        <span>价格</span>
                        <div><span>￥</span><span class="sprice"></span></div>
                    </div>
                    <div class="select">
                        <div>选择机型</div>

                    </div>

                </div>
                <div id="spec_two">
                    <div class="type" style="background: #e3e3e3; border-radius: 12px;padding-bottom: 15px;">
                        <div class="Memory">
                            <div class="txt" style="margin-top: 5px;">选择内存</div>
                            <div class="mory">

                            </div>
                        </div>
                        <div class="color">
                            <div class="sc">选择颜色</div>
                            <div class="col">
                                <div class="col_span" style="width: 150px"></div>
                                <div style="float: right;margin-top: -25px;margin-right: 20px"><a class="col_txt">悠柔白</a></div>
                            </div>
                            <div class="excl">
                                <div style="margin: 5px 0px 15px 0px;">选择三星商城专属颜色</div>
                                <div>
                                    <span style="background: #696c71"></span>
                                    <span style="background: #dde4b7"></span>
                                </div>
                            </div>
                        </div>
                        <div class="number">
                            <div style="font-weight: bolder;">选择数量</div>
                            <div class="plus">
										<span id="minus" onclick="min()" style="font-size: 24px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;">-</span>
                                <span id="num" style="border-right: none;border-left: none;">1</span>
                                <span id="plus" onclick="plus()" style="border-top-right-radius: 8px;border-bottom-right-radius: 8px;">+</span>
                            </div>
                        </div>
                    </div>
                    <div class="after">
                        <div class="steward" style="overflow: hidden;">
                            <div class="ste_top" style="margin: 15px 0px;">
                                <span>管家服务</span>
                                <span>一产品一服务，非叠加</span>
                                <img src="img/help.png">
                            </div>
                            <div class="ste_sel">
                                <div class="ste_one">
                                    <div>12个月优惠换屏/后壳服务</div>
                                    <div style="text-align: center;font-weight: bold;">￥349</div>
                                </div>
                                <div class="ste_one">
                                    <div>24个月优惠换屏/后壳服务</div>
                                    <div style="text-align: center;font-weight: bold;">￥899</div>
                                </div>
                                <div class="ste_one">
                                    <div style="padding: 8px 27px;">不需要管家服务</div>
                                </div>
                            </div>
                        </div>
                        <div class="long" style="overflow: hidden;">
                            <div class="ste_top" style="margin: 15px 0px;">
                                <span>远程服务</span>
                                <span>服务说明</span>
                                <img src="img/help.png">
                            </div>
                            <div class="long_two">
                                <div>
                                    <div>接受服务</div>
                                </div>
                                <div>
                                    <div>不需要</div>
                                </div>
                            </div>
                        </div>
                        <div class="stages" style="overflow: hidden;">
                            <div class="sta_one">分期0利率</div>
                            <div class="sta_two">
                                <div>
                                    <div>至高享24期</div>
                                    <div>0利率</div>
                                    <div>￥237.46/每期</div>
                                </div>
                                <div>
                                    <div>至高享12期</div>
                                    <div>0利率</div>
                                    <div>￥474.92/每期</div>
                                </div>
                                <div style="padding: 18px 0px;">
                                    <div>不需要分期</div>
                                    <div>0利率</div>
                                </div>
                            </div>
                        </div>
                        <div class="gift">
                            <div class="gift_top">
                                <span>购机好礼</span>
                                <span style="color: #bfbfbf;font-size: 12px;">总有一款适合你</span>
                            </div>
                            <div class="gift_two">
                                <div class="gift_box">
                                    <input
                                            style="cursor: pointer; float: left;margin-top: 125px;margin-left: 30px;"
                                            type="radio">
                                    <div class="sel_gift" style="">
                                        <div class="subsidy">
                                            <img src="img/favourable.png">
                                            <div>回收补贴</div>
                                            <div>至高享400元</div>
                                        </div>
                                        <div class="subsidy">
                                            <img style="width: 40px;height: 40px;" src="img/charger.png">
                                            <div>旅行充电器25W(赠品颜色随机)</div>
                                        </div>
                                        <div class="subsidy">
                                            <img style="width: 40px;height: 40px;" src="img/screen.png">
                                            <div>
                                                1年碎屏险
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="gift_box">
                                    <input
                                            style="cursor: pointer;float: left;margin-top: 75px;margin-left: 30px;"
                                            type="radio">
                                    <div class="sel_gift">
                                        <div class="subsidy">
                                            <img src="img/favourable.png">
                                            <div>回收补贴</div>
                                            <div>至高享400元</div>
                                        </div>
                                        <div class="subsidy">
                                            <img style="width: 40px;height: 40px;" src="img/charger.png">
                                            <div>旅行充电器25W(赠品颜色随机)</div>
                                        </div>

                                    </div>
                                    <div class="gift_box">
                                        <input
                                                style="cursor: pointer;float: left;margin-top: 75px;margin-left: 30px;"
                                                type="radio">
                                        <div class="sel_gift" style="">
                                            <div class="subsidy">
                                                <img src="img/favourable.png">
                                                <div>回收补贴</div>
                                                <div>至高享400元</div>
                                            </div>
                                            <div class="subsidy">
                                                <img style="width: 40px;height: 40px;" src="img/charger.png">
                                                <div>旅行充电器25W(赠品颜色随机)</div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="put">
                                    <div class="put_top" style="margin-top: 10px;">
                                        <span>随心搭</span>
                                        <span>查看全部></span>
                                    </div>
                                    <div class="put_body">
                                        <div class="phone"><img style="width: 100%;height: 100%;"
                                                                src="img/handset.png"></div>
                                        <div class="txt">
                                            Galaxy S23 悠柔白 8GB+128GB
                                        </div>
                                        <div class="price">
                                            <div style="margin-top: 15px;">￥7076.30</div>
                                            <div style="text-align: center;color: #4d4d4d;"><del>￥7597</del>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 商品信息图及评价 -->
    <div class="shop">
        <div class="shop_nav">
            <div class="nav_box">
                <span>Galaxy S23</span>
                <a href="#shop_infor" style="margin-left: 700px;">商品详情</a>
                <a href="#shop_appraise">商品评价</a>
            </div>
        </div>
        <div class="shop_infor">
            <div class="title">
                <div>
                    <a id="shop_infor">商品详情</a>
                    <img src="img/downward.png" onclick="test(this)">
                </div>
            </div>
            <div id="fold" style="display: none;">
<%--                <img src="img/details1.jpg">--%>
<%--                <img src="img/details2.jpg">--%>
<%--                <img src="img/details3.jpg">--%>
<%--                <img src="img/details4.jpg">--%>
            </div>
        </div>
        <div class="appraise">
            <div class="title">
                <div>
                    <a id="shop_appraise">商品评价</a>
                    <img src="img/downward.png" onclick="test1(this)">
                </div>
            </div>
            <div id="raise"  style="display: none;">
                <div class="total" style="font-size: 12px;">
                    <span>全部评价</span>
                    <input type="radio" style="margin-left: 1170px;">全部评价
                    <input type="radio">带图评价
                </div>
                <div class="ras_one">
                    <div style="width: 50px;height: 50px;margin-left: 20px;"><img src="img/personal.png"
                                                                                  style="width: 100%; height: 100%;"></div>
                    <div style="font-weight: bolder;margin-left: 20px;">Galaxy S23 悠远黑 8GB+128GB</div>
                    <div style="margin: 15px 20px;">电池优化了</div>
                    <div style="margin: 0px 0px 15px 20px; font-weight: bold; color: #616161;">2023-03-12
                        17:30:23</div>
                    <div style="margin-left: 20px;">
                        <div style="float: left;"><img src="img/threestars.png"></div>
                        <div style="float: left;">
									<span
                                            style="display: block; padding: 10px;">你的这般夸赞,我们如视珍宝,字字牢记心间,看到你收到后如此满意我们也非常高兴,作为<span
                                            style="font-weight: bolder;">S23</span>首批使用者,你的评价是对我们最大的鼓励,质量也是棒棒哒,您可以放心使用哦</span>
                            <span style="padding: 10px;font-weight: bold; color: #616161;">2023-03-2
										17:36:00</span>
                        </div>
                    </div>
                </div>
                <div class="ras_two">
                    <div style="width: 50px;height: 50px;margin-left: 20px;"><img src="img/personal.png"
                                                                                  style="width: 100%; height: 100%;"></div>
                    <div style="font-weight: bolder;margin-left: 20px;">Galaxy S23 远山灰 8GB+256GB</div>
                    <div style="margin: 15px 20px; font-size: 12px;">
                        定制版终于到了!颜值爆炸，远山灰低调又不失个性!续航大大大提升，正常中度使用一天完全用不完电量!手感甚好，167g的重量业界无敌↓梦中情机，堪称完美的手机!</div>
                    <div class="ras_tu" style="overflow: hidden;">
                        <div><img src="img/appraise1.jpeg"></div>
                        <div><img src="img/appraise2.jpeg"></div>
                        <div><img src="img/appraise3.jpeg"></div>
                    </div>
                    <div style="margin: 0px 0px 15px 20px; font-weight: bold; color: #616161;">2023-03-12
                        17:30:23</div>
                    <div style="margin-left: 20px; overflow: hidden;margin-bottom: 40px;">
                        <div style="float: left;"><img src="img/threestars.png"></div>
                        <div style="float: left;">
									<span
                                            style="display: block; padding: 10px;">你的这般夸赞,我们如视珍宝,字字牢记心间,看到你收到后如此满意我们也非常高兴,作为<span
                                            style="font-weight: bolder;">S23</span>首批使用者,你的评价是对我们最大的鼓励,质量也是棒棒哒,您可以放心使用哦</span>
                            <span style="padding: 10px;font-weight: bold; color: #616161;">2023-03-2
										17:36:00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 下方为底部 -->
    <div></div>
    <div class="BOX2">
        <div>
            <div class="BOX3">
                <div class="BOX4">
                    <img src="img/icon-logistics.png">
                    <p>专业客服团队/提供当季优惠信息</p>
                </div>
                <div class="BOX5">
                    <img src="img/icon-seven.png">
                    <p>7天无理由退货15天换货(定制商品除外)</p>
                </div>
            </div>

            <div class="BOX9">
                <div class="BOX10">
                    <div class="BOX11">
                        <img src="img/icon-hand.png">
                        <span>官方正品请安心购买</span>
                    </div>
                    <div class="BOX12">
                        <img src="img/icon-phone.png">
                        <div>
                            <span>服务中心</span><br>
                            <span style="font-weight: 600;">400-011-8899(09:00~22:</span><br>
                            <span style="font-weight: 600;"> 00)</span>
                        </div>
                    </div>
                </div>
                <div class="BOX13">
                    <div>关注我们</div>
                    <img src="img/icon-app.png" style="margin-right:105px;">
                    <img src="img/icon-wb.png" style="margin-right:25px;">
                    <div style="display: flex;padding-left: 240px;width: 110px;">
                        <p>微博</p>
                        <p style="padding-left: 20px;">下载
                        <p style="font-weight:600">APP</p>
                        </p>
                    </div>
                </div>
            </div>
            <div class="BOX7">
                <div>
                    <h4>产品</h4>
                    <p> <a href="">手机/平台</a></p>
                    <p> <a href="">手表/耳机</a></p>
                    <p> <a href="">电视/影音</a></p>
                    <p> <a href="">生活家电</a> </p>
                    <p> <a href="">显示器/存储</a></p>
                </div>
                <div style="margin-left: 56px;">
                    <h4>我的三星</h4>
                    <p> <a href="">我的订单</a></p>
                    <p> <a href="">我的星钻</a></p>
                    <p> <a href="">优惠券</a></p>
                    <p> <a href="">个人地址</a> </p>
                    <p> <a href="">收货地址</a></p>
                </div>
            </div>
            <div class="BOX8">
                <div style="height: 230px;">
                    <h4>产品</h4>
                    <p> <a href="">常见问题</a></p>
                    <p> <a href="">三星商城账号</a></p>
                    <p> <a href="">产品和订单</a></p>
                    <p> <a href="">商品支付及发票</a> </p>
                    <p> <a href="">三星专属管家服务</a></p>
                    <p> <a href="">物流</a></p>
                    <p> <a href="">售后服务</a></p>
                </div>
                <div style="margin-left: 50px;">
                    <h4>服务支持</h4>
                    <p> <a href="">关于商城</a></p>
                    <p> <a href="">关于三星</a></p>
                    <p> <a href="">售后网点查询</a></p>
                    <p> <a href="">联系我们</a> </p>
                    <p> <a href="">体验反馈➚ </a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="BottomBox">
        <div>
            <div class="agree">
                <p style="padding-left: 50px;">隐私政策</p>
                <p style="padding-left: 20px;">用户协议</p>
                <p style="padding-left: 20px;">网站地图</p>
                <p style="padding-left: 720px;">© 1995-2023 三星（中国）投资有限公司 版权所有</p>
            </div>
            <div class="agree">
                <img src="img/icon-record.d0289dc0.png" style="padding-left: 50px;">
                <p>京公网安备 11010502040099号</p>
                <p style="padding-left: 20px;">京ICP备05068163号</p>
                <img src="img/icon-gscord.c3e17e54.png" style="padding-left: 10px;">
                <p>营业执照</p>
                <p style="padding-left: 500px;">三星（中国）投资有限公司运营三星商城并销售产品</p>
            </div>
        </div>
    </div>

</div>
<div class="bottom" >
    <div>
        <div>
            <div class="bot_txt">
                <div class="bot_type" style="margin-bottom: 10px;"><span>Galaxy S23</span><span class="bot_memory"
                        style="font-size: 12px;">256G|8G</span><span style="font-size: 12px;" class="bot_color">|悠柔白</span></div>
                <div class="address">配送至
                    <select id="" style="border-radius: 10px;border: solid 1px #a7a7a7;">
                        <option value="朝阳区">朝阳区</option>
                    </select>
                    预计2023-03-15 18:00前送达(预售等特殊情况除外)
                </div>
            </div>
            <div class="bot_pri">总价格:
                <a style="font-size: 20px;font-weight: bolder">￥</a><span class="tnum">5699</span>
                <button onclick="addCart()" class="addcart">加入购物车</button>
                <button class="purchase" onclick="buy()">立即购买</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
